/**
 * 定义每个组件都可能需要用到的基本样式
 * @description 默认是全部组件都添加这些属性
 *  property { Boolean } 		disabled		是否可以点击
 *  property { Boolean } 		loading			加载状态
 *  property { String } 		size			大小    多参数默认为width和height 空格传值 默认单位rpx
 *  property { String } 		gap				内边距 pading	空格传值 默认单位rpx
 *  property { String } 		spa				外边距 margin	空格传值 默认单位rpx
 *  property { String } 		radius			圆角radius		空格传值 默认单位rpx
 *  property { String } 		ftsize			字体大小
 *  property { String } 		color			字体颜色
 *  property { String } 		weight			字重	
 *  */



module.exports = {
	// 
	props: {
		//是否可点击 
		disabled: {
			type: Boolean,
			default: false,
		},
		//加载状态
		loading: {
			default: false,
			type: Boolean,
		},
		customClass: {
			type: String,
			default: ''
		},
		wh: {
			type: String,
			default: '',
		},
		//padding
		gap: {
			default: '',
			type: String,
		},
		//margin
		spa: {
			default: '',
			type: String,
		},
		//圆角
		radius: {
			default: '',
			type: String,
		},
		//字体
		ftsize: {
			type: String,
			default: '26',
		},
		bgColor: {
			default: '',
			type: String,
		},
		//字体颜色
		color: {
			default: '',
			type: String,
		},
		//旋转角度
		rotate: {
			type: [Number, String],
			default: 0
		},
		//字重
		weight: {
			default: '',
			type: String,
		},
		//类名
		className: {
			default: '',
			type: String,
		},
		bordercolor: {
			type: String,
			default: '',
		},
		border: {
			type: String,
			default: '0',
		},
		solid: {
			type: String,
			default: 'solid',
		},
		family: {
			type: String,
			default: 'PingFang SC, PingFang SC',
		},
	},
	data() {
		return {}
	},
	onLoad() {},
	created() {},
	computed: {
		style() {
			const wh = this.wh.split(" ").map(n => this.addUnit(n));
			const gap = this.gap.split(" ").map(n => this.addUnit(n)).join(' ');
			const spa = this.spa.split(" ").map(n => this.addUnit(n)).join(' ');
			const radius = this.radius.split(" ").map(n => this.addUnit(n)).join(' ');
			let style = {
				'border': `${this.border}rpx ${this.solid}`,
				'bordercolor': this.bordercolor,
				"margin": this.spa ? spa : '',
				"font-size": this.ftsize + 'rpx',
				'font-family': this.family,
				"padding": this.gap ? gap : '',
				"borderRadius": this.radius ? radius : '',
				'transform': 'rotate(' + this.rotate + 'deg)',
				"width": wh[0],
				"height": wh[1] || wh[0],
			};
			return style
		}
	},
	methods: {
		clickHandle() {
			if (this.disabled) return
			if (this.loading) return true
			this.$emit('click')
		},
		// 阻止事件冒泡
		preventEvent(e) {
			e && typeof(e.stopPropagation) === 'function' && e.stopPropagation()
		},
		// 空操作
		noop(e) {
			this.preventEvent(e)
		},
		getParentData(parentName = '') {
			// 避免在created中去定义parent变量
			if (!this.parent) this.parent = {}
			// 这里的本质原理是，通过获取父组件实例(也即类似u-radio的父组件u-radio-group的this)
			// 将父组件this中对应的参数，赋值给本组件(u-radio的this)的parentData对象中对应的属性
			// 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
			// 此处并不会自动更新子组件的数据，而是依赖父组件u-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
			this.parent = this.mParent(parentName)
			if (this.parent.children) {
				// 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
				this.parent.children.indexOf(this) === -1 && this.parent.children.push(this)
			}
			if (this.parent && this.parentData) {
				// 历遍parentData中的属性，将parent中的同名属性赋值给parentData
				Object.keys(this.parentData).map((key) => {
					this.parentData[key] = this.parent[key]
				})
			}
		},
		mParent(name = undefined) {
			let parent = this.$parent
			// 通过while历遍，这里主要是为了H5需要多层解析的问题
			while (parent) {
				// 父组件
				if (parent.$options && parent.$options.name !== name) {
					// 如果组件的name不相等，继续上一级寻找
					parent = parent.$parent
				} else {
					return parent
				}
			}
			return false
		}
	},
	beforeDestroy() {

	}
}